<!--  费用上账-->
<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />

    <!-- table区域-begin -->
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        v-bind='vexConfig'
        :align='left'
        :border='true'
        :checkbox-config='checkboxConfig'
        :columns='columns'
        :data='dataSource'
        :height='pageHeight-seachHeight-94'
        :loading='loading'
        :resizable='true'
        :showOverflow='true'
        :toolbar-config='tableToolbar'
        size='mini'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <div class="flex" style="display: flex;justify-content: space-between;align-items: center">
            <!-- 操作按钮区域 -->
            <div class='table-operator' style="display: flex;align-items: center">
              <a-button :disabled='selectedRowKeys.length<=0' type='primary' @click='submit'>提交</a-button>
              <a-button v-has="'costUp:getOut'" type='primary'
                        @click="downExportXls('tpm_fee_pay_detail_service')">明细导出
              </a-button>
            </div>
<!--            <div class='moreData'>-->
<!--              <div class='moreData-box'>-->
<!--                <span style='fontWeight:700'>核销金额:</span>-->
<!--                <span style='margin:12px 0'>当页合计: {{ moneyItem.pageAuditAmount }}</span>-->
<!--                <span>总合计:{{ moneyItem.auditTotalAmount }}</span>-->
<!--              </div>-->
<!--              <div class='moreData-box'>-->
<!--                <span style='fontWeight:700'>上账金额:</span>-->
<!--                <span style='margin:12px 0'>当页合计:{{ moneyItem.pageFeePayAmount }}</span>-->
<!--                <span>总合计:{{ moneyItem.feePayTotalAmount }}</span>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </template>
        <template #feePayCode='{ row,rowIndex }'>
          <a @click='handleDetail(row)'>{{ row.feePayCode }}</a>
        </template>
        <template #action='{ row:record }'>
          <a v-if='record.bpmStatus!=3' @click='handleEdit(record)'>编辑</a>
        </template>

        <template #pager>
          <vxe-pager
            :currentPage.sync='ipagination.current'
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :page-size.sync='ipagination.pageSize'
            :pageSizes='ipagination.pageSizeOptions'
            :total='ipagination.total'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->

    <cost-detail ref='modalForm' @ok='modalFormOk'></cost-detail>

  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@api/manage'
import costDetail from './modules/costDetail'

export default {
  name: 'costUp',
  mixins: [PageListMixin],
  components: {
    costDetail
  },
  data() {

    return {
      description: '费用上账',
      searchConfig: [
        {
          type: 'a-select',
          name: 'bpmStatus',
          option: [{
            name: '未上账',
            value: '1'
          }, {
            name: '部分上账',
            value: '2'
          }, {
            name: '完全上账',
            value: '3'
          }],
          placeholder: '请选择'
        },
        {
          type: 'input',
          name: 'auditCode',
          placeholder: '核销编号'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'auditName',
          placeholder: '核销名称'
        },
        {
          // label:'售达方编码',
          type: 'date',
          name: 'createDate',
          placeholder: '创建时间'
        },
        {
          // label:'售达方名称',
          type: 'input',
          name: 'auditCreateBy',
          placeholder: '创建人'
        },
        {
          type: 'input',
          name: 'actOrgCode',
          placeholder: '申请人组织'
        }, {
          // label:'送达方名称',
          type: 'input',
          name: 'actCode',
          placeholder: '活动编码'
        }, {
          // label:'送达方名称',
          type: 'input',
          name: 'actName',
          placeholder: '活动名称'
        }],
      // 表头
      columns: [
        { type: 'checkbox', width: 50, fixed: null, field: 'a' },
        {
          title: '费用上账编号',
          field: 'feePayCode',
          minWidth: 120,
          slots: { default: 'feePayCode' }
        },
        {
          title: '核销编码',
          field: 'auditCode',
          minWidth: 80
        },
        {
          title: '活动编号',
          minWidth: 80,
          field: 'actCode'
        },
        {
          title: '活动名称',
          minWidth: 80,
          field: 'actName'
        },
        {
          title: '核销金额',
          minWidth: 80,
          field: 'auditAmount'
        },
        {
          title: '上账金额',
          minWidth: 80,
          field: 'feePayAmount',
          slots: {
            default: ({ row }) => {
              if (row.id == 'wwwwwwwwwwwwwwwwwwwwwwwww') {
                return row.pageFeePayAmount
              } else {
                return row.feePayAmount
              }
            }
          }
        },

        {
          title: '创建人',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '创建时间',
          minWidth: 120,
          field: 'createTime'

        },
        {
          title: '更新人',
          minWidth: 80,
          field: 'updateName'

        },
        {
          title: '更新时间',
          minWidth: 120,
          field: 'updateTime'

        },
        {
          title: '备注',
          minWidth: 80,
          field: 'remarks'

        },
        {
          title: '状态',
          fixed: 'right',
          field: 'bpmStatus',
          minWidth: 120,
          slots: {
            default: ({ row }) => {
              let child = (row.bpmStatus == '1' ? '未上账' : (row.bpmStatus == '2' ? '部分上账' : '完全上账'))
              return child
            }
          }
        },
        {
          title: '操作',
          field: 'action',
          minWidth: 120,
          fixed: 'right',
          slots: { default: 'action' }
        }
      ],
      /* 分页参数 */
      // ipagination: {
      //   current: 1,
      //   pageSize: 11,
      //   pageSizeOptions: ['11', '21', '31', '41', '51'],
      //   showTotal: (total, range) => {
      //     return range[0] + '-' + range[1] + ' 共' + total + '条'
      //   },
      //   showQuickJumper: true,
      //   showSizeChanger: true,
      //   total: 0
      // },
      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL'] + '/feepay/tpmFeePayHead/findPageList',
        // 详情接口
        detail: window._CONFIG['domianTpmURL'] + '/feepay/tpmFeePayHead/getInfo',
        submit: window._CONFIG['domianTpmURL'] + '/feepay/tpmFeePayHead/submitById'
      },
      moneyItem: {}
    }
  },
  created() {


  },


  watch: {},
  computed: {},
  methods: {
    // getQueryParams() {
    //   var param = Object.assign(this.queryParam, this.isorter, this.filters, this.searchOn)
    //   param.field = this.getQueryField()
    //   param.current = this.ipagination.current
    //   param.size = this.ipagination.pageSize
    //   return param
    // },
    loadData(arg) {
      if (!this.url || !this.url.list) {
        // this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      // console.log(params)
      // if (params.size % 10 !== 0) {
      //   params.size = params.size - 1
      // }
      this.loading = true
      let request = null
      const isNoPagnation = ['getDictByCode'].some(url => new RegExp(`${url}$`).test(this.url.list))
      if (isNoPagnation) {
        request = getAction
      } else {
        request = postAction
      }
      var that = this
      return request(this.url.list, params).then((res) => {
        if (res.success) {
          let {
            records = [],
            total
          } = res.result
          if (res.result instanceof Array) {
            records = res.result
          }
          that.dataSource = isNoPagnation ? res.result : records
          that.dataSource.forEach(item => {
            if (!item.id) {
              this.moneyItem = item
            }
          })
          // that.dataSource.splice(that.dataSource.length - 1, 1)
          console.log(this.dataSource)
          if (!isNoPagnation) {
            that.ipagination.total = res.result.total || 0
            that.ipagination.pageSize = res.result.size
          }

        } else {
          that.$message.warning(res.message)
        }
        that.loading = false
      })
      // }
    },
    submit() {
      this.loading = true
      getAction(this.url.submit, { id: this.selectedRowKeys[0] }).then(res => {
        if (res.success) {
          this.$message.warning(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },


    handleSingle() {
      this.$refs.sendSap.add()
      this.$refs.sendSap.title = '上账'
    }

  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

/deep/ .ant-pagination {
  float: right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}
.moreData {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 40px;

  .moreData-box {
    display: flex;
    //flex-direction: column;
    margin: 0 8px;
    align-items: center;
    gap: 30px;
  }
}
</style>